<template>

	<view class="page">
		<image style="width: 100%;height: 100vh;position: fixed;top: 0;z-index: -1;" src="/static/images/bj222.png"></image>
		<u-navbar :bgColor="bgColor" :fixed="false" title="就诊流程" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<view class="top">

			<!-- "type": 2, //预约类型 1用户自己预约 2到店预约 3第三方平台预约 -->
			<!-- "status": 4, //状态 1已预约 2已取消 3已到店 4已完结 -->

			<!-- 第一步++++++++++++++++++++++++++++ -->
			<view>

				<view class="row_a_c">
					<view class="circle">1</view>
					<view class="yycg">预约成功</view>
				</view>

				<view class="itema">
					<view class="yytime">预约时间：{{InfosData.order.arrival_at}}</view>
					<view class="yytime">提交时间：{{InfosData.order.created_at}}</view>
					<view class="yytime" v-if="InfosData.order.type==1">预约类型：用户自己预约</view>
					<view class="yytime" v-if="InfosData.order.type==2">预约类型：到店预约</view>
					<view class="yytime" v-if="InfosData.order.type==3">预约类型：第三方平台预约</view>
				</view>

			</view>
			<!-- 第一步============================ -->

			<!-- 第二步++++++++++++++++++++++++++++ -->
			<view>

				<view class="row_a_c">
					<view class="circle">2</view>
					<view class="yycg">确认预约</view>
				</view>


				<view class="itemb ">

					<view class="row">
						<image class="tx" :src="InfosData.order.user.avatar"></image>
						<view>
							<view class="row">
								<view class="name">{{InfosData.order.name}}</view>
								<view class="row">
									<view class="age">{{InfosData.order.user.age}}岁</view>
									<image v-if="InfosData.order.user.gender==1" class="nv" src="/static/images/nan.png"></image>
									<image v-else class="nv" src="/static/images/nv.png"></image>
								</view>
							</view>
							<view class="tel">联系号码：{{InfosData.order.phone}}</view>
							<view class="kss">预约科室：{{InfosData.order.territory.name}}</view>
						</view>
					</view>

					<view class="itemxian"></view>



					<view class="row_a_c space-between" v-if="ddstep==1">
						<view class="jzz center" @click="confirmOrderFuc()">确认预约</view>
						<view class="jzz center" @click="toUrl('/pages/patient/edited-case')">取消预约</view>
						<view class="jzz center" @click="toUrl('/pages/employee/payment-confirmation')">有成交意向</view>
					</view>


					<view class="row_a_c space-between" v-else>
						<view></view>
						<view class="jzzhui center" v-if="ddstep>4">已确认预约</view>
						<view class="jzzhui center" v-if="ddstep==2">已取消预约</view>
						<view class="jzzhui center" v-if="ddstep==3">确认成交意向</view>
						<view class="jzzhui center" v-if="ddstep==4">预约过期</view>
					</view>





				</view>
			</view>
			<!-- 第二步============================ -->



			<!-- 第三步++++++++++++++++++++++++++++ -->
			<view v-if="ddstep > 4 && ddstep != 4">

				<view class="row_a_c">
					<view class="circle">3</view>
					<view class="yycg">确认到店</view>
				</view>


				<view class="itemb ">

					<view class="row">
						<image class="tx" :src="InfosData.order.user.avatar"></image>
						<view>
							<view class="row">
								<view class="name">{{InfosData.order.name}}</view>
								<view class="row">
									<view class="age">{{InfosData.order.user.age}}岁</view>
									<image v-if="InfosData.order.user.gender==1" class="nv" src="/static/images/nan.png"></image>
									<image v-else class="nv" src="/static/images/nv.png"></image>
								</view>
							</view>
							<view class="tel">联系号码：{{InfosData.order.phone}}</view>
							<view class="kss">预约科室：{{InfosData.order.territory.name}}</view>
						</view>
					</view>

					<view class="itemxian"></view>


					<view class="row_a_c space-between" v-if="ddstep>10">
						<view></view>
						<view class="jzzhui center">已确认到店</view>
					</view>


					<view class="row_a_c space-between" v-else>
						<view></view>
						<view class="jzz center" @click="confirmArriveFuc()">确认到店</view>
					</view>


				</view>


			</view>
			<!-- 第三步============================ -->



			<!-- 第四步++++++++++++++++++++++++++++ -->
			<view v-if="ddstep>=20">

				<view class="row_a_c">
					<view class="circle">4</view>
					<view class="yycg">医生接诊</view>
				</view>


				<view class="itemb ">
					<view class="row">
						<image class="tx" :src="InfosData.order.user.avatar"></image>
						<view>
							<view class="row">
								<view class="name">{{InfosData.order.name}}</view>
								<view class="row">
									<view class="age">{{InfosData.order.user.age}}岁</view>
									<image v-if="InfosData.order.user.gender==1" class="nv" src="/static/images/nan.png"></image>
									<image v-else class="nv" src="/static/images/nv.png"></image>
								</view>
							</view>
							<view class="tel">联系号码：{{InfosData.order.phone}}</view>
							<view class="kss">预约科室：{{InfosData.order.territory.name}}</view>
						</view>
					</view>

					<view class="itemxian"></view>

					<view class="row_a_c space-between" v-if="ddstep>20">
						<view></view>
						<view class="jzzhui center">已接诊</view>
					</view>

					<view class="row_a_c space-between" v-else>
						<view></view>
						<view class="jzz center" @click="clinicalReceptionFuc()">接诊</view>
					</view>

				</view>

			</view>
			<!-- 第四步============================ -->


			<!-- 第五步++++++++++++++++++++++++++++ -->
			<view v-if="ddstep>=30">
				<view class="row_a_c">
					<view class="circle">5</view>
					<view class="yycg">患者就诊</view>
				</view>
				<view class="itemb ">

					<view class="row">
						<image class="tx" :src="InfosData.order.user.avatar"></image>
						<view>
							<view class="row">
								<view class="name">{{InfosData.order.name}}</view>
								<view class="row">
									<view class="age">{{InfosData.order.user.age}}岁</view>
									<image v-if="InfosData.order.user.gender==1" class="nv" src="/static/images/nan.png"></image>
									<image v-else class="nv" src="/static/images/nv.png"></image>
								</view>
							</view>
							<view class="tel">联系号码：{{InfosData.order.phone}}</view>
							<view class="kss">预约科室：{{InfosData.order.territory.name}}</view>
						</view>
					</view>

					<view class="itemxian"></view>

					<view class="row_a_c space-between">
						<view></view>
						<view class="row_a_c">
							<view style="margin-right: 30rpx;" class="jzz center" @click="endOfVisitFuc()" v-if="ddstep==30">结束</view>
							<view class="jzz center" @click="toUrlLc(order)">填写病历</view>
						</view>
					</view>


				</view>
			</view>
			<!-- 第五步============================ -->



			<!-- 第六步++++++++++++++++++++++++++++ -->
			<view v-if="ddstep>=40">
				<view class="row_a_c">
					<view class="circle">6</view>
					<view class="yycg">患者缴费</view>
				</view>
				<view class="itemb ">

					<view class="row">
						<image class="tx" :src="InfosData.order.user.avatar"></image>
						<view>
							<view class="row">
								<view class="name">{{InfosData.order.name}}</view>
								<view class="row">
									<view class="age">{{InfosData.order.user.age}}岁</view>
									<image v-if="InfosData.order.user.gender==1" class="nv" src="/static/images/nan.png"></image>
									<image v-else class="nv" src="/static/images/nv.png"></image>
								</view>
							</view>
							<view class="tel">联系号码：{{InfosData.order.phone}}</view>
							<view class="kss">预约科室：{{InfosData.order.territory.name}}</view>
						</view>
					</view>

					<view class="itemxian"></view>


					<view class="row_a_c space-between" v-if="ddstep>40">
						<view></view>
						<view class="jzzhui center">已缴费</view>
					</view>

					<view class="row_a_c space-between" v-else>
						<view></view>
						<view class="jzz center" @click="toUrlJf(order)">确认缴费</view>
						<!-- <view class="jzz center" @click="toUrl('/pages/employee/payment-confirmation')">确认缴费</view> -->
					</view>


				</view>
			</view>
			<!-- 第六步============================ -->



			<!-- 第七步++++++++++++++++++++++++++++ -->
			<view v-if="ddstep>=50">
				<view class="row_a_c">
					<view class="circle">7</view>
					<view class="yycg">确认离店</view>
				</view>
				<view class="itemb ">

					<view class="row">
						<image class="tx" :src="InfosData.order.user.avatar"></image>
						<view>
							<view class="row">
								<view class="name">{{InfosData.order.name}}</view>
								<view class="row">
									<view class="age">{{InfosData.order.user.age}}岁</view>
									<image v-if="InfosData.order.user.gender==1" class="nv" src="/static/images/nan.png"></image>
									<image v-else class="nv" src="/static/images/nv.png"></image>
								</view>
							</view>
							<view class="tel">联系号码：{{InfosData.order.phone}}</view>
							<view class="kss">预约科室：{{InfosData.order.territory.name}}</view>
						</view>
					</view>

					<view class="itemxian"></view>



					<view class="row_a_c space-between" v-if="ddstep>=60">
						<view></view>
						<view class="jzzhui center">已离店</view>
					</view>

					<view class="row_a_c space-between" v-else>
						<view></view>
						<view class="jzz center" @click="confirmLeaveFuc()">确认离店</view>
					</view>



				</view>

			</view>
			<!-- 第七步============================ -->


			<!-- 第八步++++++++++++++++++++++++++++ -->
			<view v-if="ddstep>=60">
				<view class="row_a_c">
					<view class="circle">8</view>
					<view class="yycg">诊后随访</view>
				</view>
				<view class="itemb ">

					<view class="row">
						<image class="tx" :src="InfosData.order.user.avatar"></image>
						<view>
							<view class="row">
								<view class="name">{{InfosData.order.name}}</view>
								<view class="row">
									<view class="age">{{InfosData.order.user.age}}岁</view>
									<image v-if="InfosData.order.user.gender==1" class="nv" src="/static/images/nan.png"></image>
									<image v-else class="nv" src="/static/images/nv.png"></image>
								</view>
							</view>
							<view class="tel">联系号码：{{InfosData.order.phone}}</view>
							<view class="kss">预约科室：{{InfosData.order.territory.name}}</view>
						</view>
					</view>

					<view class="itemxian"></view>
					<view class="row_a_c space-between">
						<view></view>
						<!-- <view class="jzz center" @click="toUrl('/pages/followup/template')">添加计划</view> -->
						<view class="jzz center" @click="toUrlInfo(order)">添加计划</view>
					</view>

				</view>

			</view>
			<!-- 第八步============================ -->


		</view>
	</view>
</template>
<script>
	import api_appointment from '@/api/appointment.js';
	export default {

		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.getOrderProcessFuc(); //查看流程

			}
		},
		async onLoad(option) {
			this.order = option.id;
		},

		data() {
			return {
				ddstep: null, //到达步数
				InfosData: null,
				process: null, //过程
				process_nmu: null, //过程步数
				order: null,
				bgColor: 'rgba(0, 31, 63, 0)',
			};
		},
		methods: {
			
			toUrlInfo(id) {
				uni.navigateTo({
					url: '/pages/followup/template?id=' + id
				});
			},

			//确认离店
			async confirmLeaveFuc() {
				var per = {
					order: this.order
				}
				const res = await api_appointment.confirmLeave(per);
				if (res.code == 1) {
					this.$util.msg(res.message);
					this.getOrderProcessFuc();
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			//跳转确认缴费页面
			toUrlJf(id) {
				uni.navigateTo({
					url: '/pages/employee/payment-confirmation?id=' + id
				});
			},


			//跳转填写病历页面
			toUrlLc(id) {
				uni.navigateTo({
					url: '/pages/patient/edited-case?id=' + id
				});
			},





			//结束就诊
			async endOfVisitFuc() {
				var per = {
					order: this.order
				}
				const res = await api_appointment.endOfVisit(per);
				if (res.code == 1) {
					this.$util.msg(res.message);
					this.getOrderProcessFuc();
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			//确认接诊
			async clinicalReceptionFuc() {
				var per = {
					order: this.order
				}
				const res = await api_appointment.clinicalReception(per);
				if (res.code == 1) {
					this.$util.msg(res.message);
					this.getOrderProcessFuc();
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			//确认到店
			async confirmArriveFuc() {
				var per = {
					order: this.order
				}
				const res = await api_appointment.confirmArrive(per);
				if (res.code == 1) {
					this.$util.msg(res.message);
					this.getOrderProcessFuc();
				} else {
					this.$util.msg(res.message);
					return;
				}
			},






			//确认预约
			async confirmOrderFuc() {
				var per = {
					order: this.order
				}
				const res = await api_appointment.confirmOrder(per);
				if (res.code == 1) {
					this.$util.msg(res.message);
					this.getOrderProcessFuc();
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			// step
			// 1: "用户预约"
			// 2: "取消预约"
			// 3: "有意向"
			// 4: "预约过期"
			// 10: "确认预约"
			// 20: "确认到店"
			// 30: "医生接诊"
			// 40: "结束就诊"
			// 50: "缴费成功"
			// 60: "确认离店"

			//查看流程
			async getOrderProcessFuc() {
				var per = {
					order: this.order
				}
				const res = await api_appointment.getOrderProcess(per);
				if (res.code == 1) {
					this.InfosData = res.data;
					this.process = res.data.process;
					this.process_nmu = res.data.process.length;
					console.log('hhhhhhhhhhhhhhh', this.process[this.process_nmu - 1].step);
					this.ddstep = this.process[this.process_nmu - 1].step
				} else {
					this.$util.msg(res.message);
					return;
				}
			},
			toUrl(url) {
				this.navTo(url);
			},
		},
	};
</script>
<style scoped lang="scss">
	.top {
		padding: 32rpx;
	}

	.ygg {
		width: 48rpx;
		height: 48rpx;
	}

	.yycg {
		font-weight: 500;
		font-size: 32rpx;
		color: #3D3D3D;
		margin-left: 16rpx;
	}

	.sswz {
		font-weight: 400;
		font-size: 24rpx;
		color: #27CCBB;
		margin-right: 8rpx;
	}

	.itema {
		width: 622rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 16rpx;
		margin-left: auto;
		margin-right: 0;
		padding: 32rpx;
		margin-bottom: 60rpx;

	}

	.yytime {

		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-bottom: 16rpx;

	}

	.xiana {
		width: 2rpx;
		height: 265rpx;
		border: 4rpx solid #27CCBB;
		position: fixed;
		top: 300rpx;
		left: 50rpx;
	}

	.xianb {
		width: 2rpx;
		height: 380rpx;
		border: 4rpx solid #27CCBB;
		position: fixed;
		top: 610rpx;
		left: 50rpx;
	}


	.itemb {
		width: 622rpx;
		height: 320rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 32rpx;
		margin-left: auto;
		margin-right: 0;
		margin-top: 15rpx;
		margin-bottom: 60rpx;
	}

	.tx {
		width: 96rpx;
		height: 96rpx;
		border-radius: 96rpx;
		margin-right: 32rpx;
	}

	.name {
		font-weight: 800;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-right: 48rpx;
	}

	.age {

		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.85);

	}

	.nv {
		width: 24rpx;
		height: 24rpx;
		margin-top: 5rpx;
		margin-left: 12rpx;
	}

	.copy {
		width: 24rpx;
		height: 24rpx;
	}

	.tel {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 8rpx;
	}

	.kss {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 8rpx;
	}

	.itemxian {
		width: 100%;
		height: 2px;
		border-top: 2px dashed #D0D0D0;
		margin: 20px 0;
	}

	.genduo {
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.26);
	}

	.jzz {
		width: 160rpx;
		height: 52rpx;
		background: #1FA194;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}


	.jzzhui {
		width: 160rpx;
		height: 52rpx;
		background: #E7E7E7;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}


	.circle {
		width: 20px;
		/* 圆的宽度 */
		height: 20px;
		/* 圆的高度 */
		border: 2px solid #27CCBB;
		/* 边框颜色和宽度 */
		border-radius: 50%;
		/* 圆形 */
		display: flex;
		/* 使用 Flexbox 居中内容 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		font-size: 25rpx;
		/* 数字大小 */
		// font-weight: bold;
		/* 数字加粗 */
		color: #27CCBB;
		/* 字体颜色 */
	}
</style>